<template>
	<view class="page-videoMy">
		<view class="cu-card article custom-card-video">
			<block v-for="(item,index) of list" :key="item.id">
				<view class="cu-item shadow padding-top custom-margin">
					<view class="content">
						<view class="img-box margin-right flex align-end">
							<view class="img-box-bg">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="bg-shadeBottom custom padding-xs padding-top-xl flex justify-between align-center text-xs">
								<view class="flex align-center">
									<image src="@/static/icons/view.png" style="width:30rpx;height:25rpx" />
									<text class="margin-left-xs">{{item.views}}</text>
								</view>
								<view>{{item.duration}}</view>
							</view>
						</view>
						<view class="desc">
							<view class="text-content hidden2"> {{item.title}}</view>
							<view class="flex align-center justify-end">
								<button class="cu-btn custom-update-btn" @click="handleEdit(item.id)">编辑</button>
								<button class="cu-btn custom-update-btn margin-left" @click="handleDelete(item.id,index)">删除</button>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import profileMixin from "@/mixins/profile"
	export default {
		mixins: [profileMixin],
		methods: {
			handleEdit(id) {
				this.$h.router.push({
					path: "/pages/publish/videoInfo/videoInfo",
					params: {
						id
					}
				})
			},
			async handleDelete(id, index) {
				let query = {
					id
				}
				let {
					code
				} = await this.waitingLoading(this.$h.api.videoModel.postVideoDelete)(query)
				if (code === 1) {
					this.list.splice(index, 1)
					this.$h.toast('删除成功')
				}
			}
		},
		async onShow() {
			let query = {
				page: 1,
				size: 10
			}
			this.m_getList(this.$h.api.userModel.getMyVideos, query)
		}
	}
</script>

<style lang="scss" scoped>
	.page-videoMy {

		.cu-card.custom-card-video {
			padding-top: 20rpx;

			.cu-item.custom-margin {
				margin: 20rpx;
				overflow: hidden;
			}

			.img-box {
				width: 200rpx;
				height: 160rpx;
				position: relative;
			}

			.text-content {
				height: initial;
				font-size: 26rpx;
				color: #343436;
			}

			.cu-avatar.custom-video-avatar {
				width: 50rpx;
				height: 50rpx;
			}

			.cu-btn.custom-update-btn {
				background-color: rgba(0, 0, 0, 0);
				font-size: 28rpx;
				padding: 0;
			}
		}
	}
</style>
